<template>
<div>
  <div id="main" style="width:100%;height:400px"></div>
  <div id="loginPerson" style="width:100%;height:400px"></div>
  <div id="login" style="width:100%;height:400px"></div>
  <div id="money" style="width:100%;height:400px"></div>
  <div id="main1" style="width:100%;height:400px"></div>
  <div id="main2" style="width: 100%; height: 400px"></div>
 


  
  </div>
</template>




<script>
import * as echarts from "echarts"; //引入
import { stat, loginPerson, login,money,stat1,mothOrder } from "@/api/stat.js";
export default {
  data() {
    return {};
  },

  mounted() {
    stat().then((res) => {
      var datArr = [];
      var orderCuntArr = [];
      console.log(res);
      res.forEach((itme) => {
        datArr.push(itme.dat);
        orderCuntArr.push(itme.cunt);
      });
    
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      var option = {
        title: {
          left: "center",
          text: "每日订单数统计",
        },
        tooltip: {},
        xAxis: {
          data: datArr,
        },
        yAxis: {
          minInterval: 1
        },
        series: [
          {
            name: "订单数",
            type: "bar",
            data: orderCuntArr,
          },
        ],
      };
      myChart.setOption(option);
    }); 

      loginPerson().then(res=>{
        var datArr=[]
        var cuntArr=[]
        res.forEach(item=>{
          datArr.push(item.dat)
          cuntArr.push(item.cunt)
        })
         // 登录人数
      var myChart1 = echarts.init(document.getElementById("loginPerson"));
      
      var option1 = {
        title: {
          left: "center",
          text: "每日登录人数统计",
        },
        xAxis: {
          type: "category",
          data: datArr,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: cuntArr,
            type: "line",
            smooth: true,
          },
        ],
      };
      myChart1.setOption(option1);
      });

      
     
        login().then(res=>{
        var datArr=[]
        var cuntArr=[]
        console.log(res)
        res.forEach(item=>{
          datArr.push(item.dat)
          cuntArr.push(item.cunt)
        })
      // 登录人次
      var myChart2 = echarts.init(document.getElementById("login"));
      var option2 = {
        title: {
          left: "center",
          text: "每日登录人次统计",
        },
        xAxis: {
          type: "category",
          data: datArr,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: cuntArr,
            type: "line",
            smooth: true,
          },
        ],
      };
      myChart2.setOption(option2);
    })

     money().then(res=>{
        var datArr=[]
        var cuntArr=[]
        console.log(res)
        res.forEach(item=>{
          datArr.push(item.dat)
          cuntArr.push(item.cunt)
        })
      // 每日的订单金额
      var myChart3 = echarts.init(document.getElementById("money"));
      var option3 = {
        title: {
          left: "center",
          text: "每日的订单金额",
        },
        xAxis: {
          type: "category",
          data: datArr,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: cuntArr,
            type: "line",
            smooth: true,
          },
        ],
      };
      myChart3.setOption(option3);
    })

        stat1().then(res=>{
        var datArr=[];
        var orderCuntArr=[];
        console.log(res)
        res.forEach(itme => {
          datArr.push(itme.dat)
          orderCuntArr.push(itme.count1)  
        });

        


         // 基于准备好的dom，初始化echarts实例
    var myChart4 = echarts.init(document.getElementById('main1'))
    // 绘制图表
    var option4 = {
      title: {
        left: 'center',
        text: '每月订单金额统计',
      },
      tooltip: {},
      xAxis: {
        data: datArr,
      },
      yAxis: {
        minInterval: 1
      },
      series: [
        {
          name: '订单金额',
          type: 'bar',
          data:orderCuntArr,
        },
      ],
    }

    myChart4.setOption(option4)

       })


  mothOrder().then((res) => {
      var datArr = [];
      var orderCuntArr = [];
      console.log(res);
      res.forEach((itme) => {
        datArr.push(itme.dat);
        orderCuntArr.push(itme.cunt);
      });

      // 基于准备好的dom，初始化echarts实例
      var myChart5 = echarts.init(document.getElementById("main2"));
      // 绘制图表
      var option5 = {
        title: {
          left: "center",
          text: "每月订单数量统计",
        },
        tooltip: {},
        xAxis: {
          data: datArr,
        },
        yAxis: {},
        series: [
          {
            name: "订单数",
            type: "bar",
            data: orderCuntArr,
          },
        ],
      };

      myChart5.setOption(option5);
    });








  },
};
       
</script>

